<template>
	<view class="index">
		<van-search @click-input="goSearch" placeholder="请输入搜索关键词" input-align="center" />
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="(b,bi) in banners">
				<image :src="b.src" mode="aspectFill"></image>
			</van-swipe-item>
		</van-swipe>
		<van-notice-bar left-icon="volume-o" :text="notify.content" />
		<view class="card">
			<van-grid :column-num="3">
				<van-grid-item v-for="(c,ci) in cates" :key="'cate'+ci">
					<van-image :src="c.url"></van-image>
					<view class="cate-name">
						{{c.name}}
					</view>
				</van-grid-item>
			</van-grid>
		</view>

		<van-dropdown-menu>
			<van-dropdown-item v-model="value1" @change="setGoods" :options="option1" />
			<van-dropdown-item v-model="value2" @change="orderGoods" :options="option2" />
		</van-dropdown-menu>
		<van-card v-for="(g,gi) in goods" :key="'goods'+gi" :desc="g.goods_desc" :price="g.price"
			:origin-price="g.pre_price" :title="g.name" :thumb="g.goods_thumb" @click="goDetail(g._id)">
			<template #tags>
				<van-tag v-for="(gt,gti) in g.keywords.split(',')" plain type="danger">{{gt}}</van-tag>
			</template>
			<template #footer>
				<view class="">
					<van-tag>
						库存：{{g.remain_count}}
					</van-tag>
					<van-tag>
						销量：{{g.month_sell_count}}/月
					</van-tag>
				</view>
			</template>
		</van-card>
		<van-tabbar v-model="active" @change="onChange">
			<van-tabbar-item icon="home-o">首页</van-tabbar-item>
			<van-tabbar-item icon="apps-o">分类</van-tabbar-item>
			<van-tabbar-item icon="shopping-cart">购物车</van-tabbar-item>
			<van-tabbar-item icon="friends">个人中心</van-tabbar-item>
		</van-tabbar>
	</view>
</template>

<script>
	const Home = uniCloud.importObject('home')
	import {
		ref
	} from 'vue';
	export default {
		setup() {
			const active = ref(0);
			const onChange = (index) => {
				let router = ['index', 'cate', 'cart', 'user']
				uni.reLaunch({
					url: `/pages/${router[index]}/index`
				})
			}
			const value1 = ref(0);
			const value2 = ref('a');
			const option1 = [{
					text: '全部商品',
					value: 0
				},
				{
					text: '新款商品',
					value: 1
				},
				{
					text: '热卖商品',
					value: 2
				},
			];
			const option2 = [{
					text: '默认排序',
					value: 'a'
				},
				{
					text: '好评排序',
					value: 'b'
				},
				{
					text: '销量排序',
					value: 'c'
				},
			];
			return {
				value1,
				value2,
				option1,
				option2,
				active,
				onChange,
			};
		},
		data() {
			return {
				cates: [],
				banners: [],
				notify: "",
				goods: []
			}
		},
		onLoad() {
			this.getSwiper()
			this.homeData()
			this.getGoods()
		},
		methods: {
			getSwiper() {
				uniCloud.callFunction({
					name: "swiper"
				}).then(res => {
					console.log(res);
					this.banners = res.result.data
				})
			},
			homeData() {
				Home.categories().then(res => {
					this.cates = res.data
				})
				Home.notify().then(res => {
					this.notify = res.data[0]
				})
			},
			getGoods(where = {}) {
				Home.goods(where).then(res => {
					this.goods = res.data
				})
			},
			setGoods(e) {
				switch (e) {
					case 0:
						this.getGoods({})
						break;
					case 1:
						this.getGoods({
							isNew: true
						})
						break;
					case 2:
						this.getGoods({
							isHot: true
						})
						break;
				}
			},
			orderGoods(e) {
				switch (e) {
					case "a":
						this.getGoods({})
						break;
					case "b":
						this.getGoods({
							goodsComment: true
						})
						break;
					case "c":
						this.getGoods({
							sales: true
						})
						break;
				}
			},
			goSearch() {
				uni.navigateTo({
					url: "pages/goods/search"
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/goods/detail?id=' + id
				})
			}
		}
	}
</script>

<style>
	.my-swipe .van-swipe-item {
		color: #00ff00;
		height: 450upx;
		width: 100%;
	}

	.my-swipe .van-swipe-item image {
		width: 100%;
	}

	.van-image {
		width: 88upx;
		height: 88upx;
	}

	.cate-name {
		min-width: 100upx;
		font-size: 20upx;
		text-align: center;
		padding: 10upx 0;
		color: #666666;
	}

	.van-card .van-tag {
		margin-right: 10upx;
	}
</style>
